$(function(){
    var id=location.search.split('=')[1];
    $(".comment_link").on("click",function(){
        var value=$("#comment_content_new").val();
        $.ajax({
            type:'get',
            url:'/comment',
            data:{
                t:1,
                id:id,
                type:2,
                content:value
            },
            success:function(e){
                console.log(e);
                $.ajax({
                    type:'get',
                    url:'/comment/playlist',
                    data:{
                        id:id
                    },
                    success:function(e){
                        console.log(e);
                        $(".comment_new_ul").empty()
                        for(let i=0;i<e.comments.length;i++){
                            var time=timestampToTime(e.comments[i].time)
                            var html=`
                        <div class="comment_nice_li_user_img">
                            <img src="${e.comments[i].user.avatarUrl}">
                        </div>
                        <div class="comment_nice_li_content">
                            <div class="agree_count">
                                <span>${e.comments[i].likedCount}</span>
                                <svg class="agree_img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                            </div>
                            <div class="comment_nice_li_user_name">${e.comments[i].user.nickname}<i class="vip"></i></div>
                            <div class="comment_nice_li_time">${time}</div>
                            <div class="comment_nice_li_comment">${e.comments[i].content}</div>
                        </div>
                        `
                        var div=document.createElement("div");
                        div.className='comment_nice_li'
                        div.innerHTML=html;
                        if(e.comments[i].user.vipType==0){
                            div.children[1].children[1].children[0].className=''
                        }
                        $(".comment_new_ul").append(div);
                        }
                        $(".comment_new h3 span").html(e.total)
                        $(".comment_new_last .last_count").html(e.total)
                        
                    }
                })
            }
        })
    })


    $.ajax({
        type:'get',
        url:'playlist/detail',
        data:{id:id},
        success:function(e){
            // console.log(e);
            var count=getCountplay(e.playlist.playCount)
            var html=`<div class="filter_img" style="background:url(${e.playlist.coverImgUrl});">
            </div>
            <div class="header_box_content">
                <span class="red_icon">歌单</span>
                <div class="header_img" >
                    <i class="header_count">${count}</i>
                    <img src="${e.playlist.coverImgUrl}" alt="">
                </div>
                <div class="header_content">
                    <h3>${e.playlist.name}</h3>
                    <a href="#" class="header_content_content">
                        <div class="user_img">
                            <img src="${e.playlist.creator.avatarUrl}">
                        </div>
                        <div class="user_text">${e.playlist.creator.nickname}</div>
                        <span class="user_img_icon" style="background-image: url(//s3.music.126.net/mobile-new/img/usericn_3x.png?71c26f8…=);"></span>
                    </a>
                </div>
            </div>`
            $(".header_box").html(html)
            $(".play_list_content").empty()
            for(let i=0;i<e.playlist.tracks.length;i++){
                var count=i+1;
                count= count>=10? count:'0'+count;
                var creator='';
                $.each(e.playlist.tracks[i].ar,function(index,value){
                    if(index==e.playlist.tracks[i].ar.length-1){
                        creator+=value.name
                    } else {
                        creator+=value.name+'/'
                    }
                })
                var html1=`
                <div class="nav2_li1">${count}</div>
                <div class="nav_2-3">
                <div class="nav2_li2">
                    <div class="nav2_li2_line1">${e.playlist.tracks[i].name}</div>
                    <div class="nav2_li2_line2"><i class="u-hmsprt sghot"></i>${creator} - ${e.playlist.tracks[i].al.name}</div>
                </div>
                <div class="nav2_li3"><span class="u-hmsprt sgchply"></span></div>
                </div>
               `
                var a=document.createElement("a");
                a.className='nav_2_content_content_li'
                a.href='singsong.html?id='+e.playlist.tracks[i].id;
                a.innerHTML=html1;
                $(".play_list_content").append(a)

            }



        }
    })
    //获取热门评论
    $.ajax({
        type:'get',
        url:'/comment/hot',
        data:{
            id:id,
            type:2
        },
        success:function(e){
            console.log(e);
            
            $(".comment_nice_ul").empty()
            for(let i=0;i<e.hotComments.length;i++){
                var time=timestampToTime(e.hotComments[i].time)
                var html=`
            <div class="comment_nice_li_user_img">
                <img src="${e.hotComments[i].user.avatarUrl}">
            </div>
            <div class="comment_nice_li_content">
                <div class="agree_count">
                    <span>${e.hotComments[i].likedCount}</span>
                    <svg class="agree_img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                </div>
                <div class="comment_nice_li_user_name">${e.hotComments[i].user.nickname}<i class="vip"></i></div>
                <div class="comment_nice_li_time">${time}</div>
                <div class="comment_nice_li_comment">${e.hotComments[i].content}</div>
            </div>
            `
            var div=document.createElement("div");
            div.className='comment_nice_li'
            div.innerHTML=html;
            if(e.hotComments[i].user.vipType==0){
                div.children[1].children[1].children[0].className=''
            }
            $(".comment_nice_ul").append(div);
            }
        }
    })

    // 获取最新评论
    $.ajax({
        type:'get',
        url:'/comment/playlist',
        data:{
            id:id
        },
        success:function(e){
            console.log(e);
            $(".comment_new_ul").empty()
            for(let i=0;i<e.comments.length;i++){
                var time=timestampToTime(e.comments[i].time)
                var html=`
            <div class="comment_nice_li_user_img">
                <img src="${e.comments[i].user.avatarUrl}">
            </div>
            <div class="comment_nice_li_content">
                <div class="agree_count">
                    <span>${e.comments[i].likedCount}</span>
                    <svg class="agree_img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                </div>
                <div class="comment_nice_li_user_name">${e.comments[i].user.nickname}<i class="vip"></i></div>
                <div class="comment_nice_li_time">${time}</div>
                <div class="comment_nice_li_comment">${e.comments[i].content}</div>
            </div>
            `
            var div=document.createElement("div");
            div.className='comment_nice_li'
            div.innerHTML=html;
            if(e.comments[i].user.vipType==0){
                div.children[1].children[1].children[0].className=''
            }
            $(".comment_new_ul").append(div);
            }
            $(".comment_new h3 span").html(e.total)
            $(".comment_new_last .last_count").html(e.total)
            
        }
    })

    function timestampToTime(timestamp) {
        var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '年';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
        D = change(date.getDate()) + '日';
        return Y + M + D 
    }
    function change(t) {
        if (t < 10) {
            return "0" + t;
        } else {
            return t;
        }
    }


    //计数功能
    function getCountplay(num){
        if(num>=100000000){
            var one=Math.floor(num/100000000);
            var tow=Math.floor(num%100000000/10000000);
            num=one+'.'+tow+"亿"
            return num
        } else if(num>=10000) {
            var one=Math.floor(num/10000);
            var tow=Math.floor(num%10000/1000);
            num=one+'.'+tow+"万"
            return num
        }
    }
})